!<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="css/element-ui.css">
    <script src="js/element-ui.js"></script>
    
      
</head>
<body>
    <div id="app" style="width: 500px;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!--账号---->>
        <el-form-item label="账号" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!--密码-->>    
        <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <!--邮箱-->>
        <el-form-item prop="email" label="邮箱" aria-required="email" :rules="[
          {required: true,message:'请输入邮箱地址'，trigger:'blur'},
          {type: 'email',message:'请输入正确的邮箱地址'，trigger: ['blur','change']}
          ]">
        <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <!--电话-->>
        <el-form-item label="电话" prop="phone" required>
            <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <!--登陆，重置-->>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即登陆</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
    </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data:{
                ruleForm: {
                    name: '',
                    pass: '',
                    email: '',
                    phone: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { pattern:"^[a-zA-Z0-9_-]{4,16}$", message: '长度在 6 到 16 个字符的账号', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { pattern:"^[a-zA-Z0-9_-]{6,18}$", message: '长度在 6 到 16 个字符的密码', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { pattern:"^^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$", message: '长度在 6 到 16 个字符的邮箱', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入号码', trigger: 'blur' },
            { pattern:"/^1[345678]\d{9}$/", message: '长度为11字符的号码', trigger: 'blur' }
          ]
    
        }
      }, methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
});
    </script>

</html>